<template>
	<view>
		<view class="positioningbox">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item class="swiper-item" v-for="(item,index) in imgbox" :key="index" @click="tourl(item)">
						<image mode="aspectFill" :src="item.img"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="searcherbox">
				<view class="input">
					<view class="imgbox">
						<image src="../../static/ss.png"></image>
					</view>
					<input v-model="keyword" maxlength="35" placeholder="搜索名称" />
					<view class="but" @click="handlelist()">
						搜索
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="hotbox">
			<view class="hotitem" v-for="(item,index) in hotlist" :key="index"  @click="tonewsdetail(item)">
				<image :src="item.img"></image>
				<view class="info">
					<text class="tipbox">
						热点
					</text>
					<text class="titlebox">
						{{item.title}}
					</text>
				</view>
				<view class="look">{{item.hits}}阅读</view>
			</view>
		</view> -->
		<view class="navtit">
			
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="swiperbox">
					<view class="scroll-view-item_H" v-for="(item,index) in catelist" :key="index"
						@click="changecate(item,index)">
						<view
							:style="{'color':index==navindex?'#FF6178':'','border-bottom':index==navindex?'solid 2rpx #FF6178':'solid 2rpx #FFF'}">
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="listbox" v-for="(item,index) in list" :key="index" @click="tonewsdetail(item)">
			<view class="leftbox">
				<view class="namebox" >
					<!-- :style="{'text-indent':index==0||index==1||index==2?'4rem':'0'}" -->
				<!-- 	<image v-if="index==0" src="../../static/new1.png"></image>
					<image v-if="index==1" src="../../static/new2.png"></image>
					<image v-if="index==2" src="../../static/new3.png"></image> -->
					{{item.title}}
				</view>
				<View class="numbox">
					<view>{{item.hits}}阅读</view>
					<view>{{dateFormat(item.createtime)}}</view>
				</View>
			</view>
			<view class="rightbox">
				<image mode="aspectFill" :src="item.img.split('|')[0]"></image>
			</view>
		</view>
		<kong v-if="list.length==0"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				list:[],
				is_data:true,
				page:1,
				imgbox:[],
				keyword:'',
				hotlist:[],
				catelist:[],
				navindex:null,
				cate_id:'',
			}
		},
		onLoad() {
			this.getlist()
			this.getimg()
			this.getcate()
		},
		onReachBottom() {
			this.is_data&&this.getlist()
		},
		methods: {
			getlist(){
				this.$http({
					url:'/api/Wechat/helpList',
					data:{
						page:this.page,
						limit:15,
						cate_id:this.cate_id,
						keyword:this.keyword
					}
				}).then(res=>{
					this.hotlist = res.data.hot
					if(res.data.list.length){
						this.list.push(...res.data.list)
						this.page++
						return
					}
					this.is_data = false
				})
			},
			handlelist(){
				this.list = []
				this.page = 1
				this.getlist()
			},
			changecate(item,index){
				this.navindex = index
				this.cate_id = item.id
				this.list = []
				this.page = 1
				this.getlist()
			},
			getcate(){
				this.$http({
					url:'/api/Wechat/news_cate'
				}).then(res=>{
					this.catelist = res.data
				})
			},
			dateFormat: function(value) {           
			                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			                var year = date.getFullYear();
			                var month = ("0" + (date.getMonth() + 1)).slice(-2);
			                var sdate = ("0" + date.getDate()).slice(-2);
			                var hour = ("0" + date.getHours()).slice(-2);
			                var minute = ("0" + date.getMinutes()).slice(-2);
			                var second = ("0" + date.getSeconds()).slice(-2);
			                // 拼接
			                var result = year + "年" + month + "月" + sdate + "日 "// + hour + ":" + minute //+ ":" + second;
			                // 返回
			                return result;
			            },
			tonewsdetail(item){
				uni.navigateTo({
					url:'/pagemy/newsdetail/newsdetail?id='+item.id
				})
				// uni.navigateTo({
				// 	url:'/pages/coursesinfo/coursesinfo?id='+item.id
				// })
				console.log(123,item)
			},
			//获取轮播图
			getimg(){
				this.$http({
					url:'/api/Activity/banner_list',
					data:{
						type:6,//1首页轮播图2商城轮播图3课程轮播图4活动轮播图5老师轮播图 6新闻中心
					}
				}).then(res=>{
					this.imgbox = res.data
				})
			},
			tourl(item){
				console.log(item.url)
				// console.log(item.url)
				if(item.url){
					uni.navigateTo({
						url:item.url
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.positioningbox{
		// position: fixed;
		// top: 0;
		// z-index: 9999;
		width: 750rpx;
		height: 430rpx;
		background-color: #FFF;
		.uni-margin-wrap {
			width: 750rpx;
			height: 300rpx;
		
			.swiper {
				height: 300rpx;
		
				.swiper-item {
					display: block;
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;
					image{
						height: 300rpx;
						width: 100%;
					}
				}
			}
		}
		.searcherbox{
			width: 690rpx;
			padding: 0 30rpx;
			background-color: #FFF;
			height: 126rpx;
			.input{
				width: 690rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				opacity: 1;
				border: 2rpx solid #E2E2E2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 35rpx;
				.imgbox{
					width: 74rpx;
					text-align: center;
					image{
						width: 33rpx;
						height: 28rpx;
					}
				}
				>input{
					width: 500rpx;
					line-height: 70rpx;
					font-size: 28rpx;
				}
				.but{
					width: 112rpx;
					height: 70rpx;
					background: #FF8A9B;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #F7F7F7;
					text-align: center;
					line-height: 70rpx
				}
			}
		}
	}
	.hotbox{
		width: 690rpx;
		display: flex;
		padding:  0 30rpx;
		justify-content: space-between;
		.hotitem{
			min-height: 418rpx;
			background: #FFFFFF;
			border-radius: 10rpx ;
			width: 336rpx;
			image{
				width: 336rpx;
				height: 226rpx;
			}
			.info{
				// display: flex;
				// flex-wrap: wrap;
				align-items: center;
				width:300rpx;
				margin: 0 auto;
				.tipbox{
					width: 70rpx;
					padding: 5rpx 10rpx;
					// height: 34rpx;
					background: linear-gradient(180deg, #FF6178 0%, #FF8158 100%);
					border-radius: 18rpx 0rpx 18rpx 0rpx;
					text-align: center;
					line-height: 34rpx;
					color: #FFF;
					font-size: 26rpx;
					margin-right: 10rpx;
				}
				.titlebox{
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
				}
			}
			.look{
				width:300rpx;
				margin: 20rpx auto 0 auto;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
			}
		}
	}
	.navtit {
		width: 750rpx;
		height: 84rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		
	
		.scroll-view_H {
			white-space: nowrap;
			width: 750rpx;
	
			.scroll-view-item_H {
				display: inline-block;
				width: fit-content;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 36rpx;
				padding: 0 15rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				border-bottom: solid 2rpx #FFF
			}
	
		}
	
		.openbox {
			width: 72rpx;
			height: 84rpx;
			background: #FFFFFF;
			text-align: center;
			line-height: 84rpx;
	
			image {
				width: 27rpx;
				height: 15rpx;
			}
		}
	}
	.listbox{
		width: 690rpx;
		// height: 196rpx;
		background: #FFFFFF;
		padding: 30rpx;
		// border-radius: 10rpx 10rpx 0rpx 0rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftbox{
			width: 468rpx;
			.namebox{
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				
				// position: relative;
				image{
					position: absolute;
					width: 22rpx;
					height: 34rpx;
					left: 35rpx;
				}
			}
			.numbox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				margin-top: 30rpx;
			}
		}
		.rightbox{
			text-align: right;
			image{
				width: 202rpx;
				height: 136rpx;
			}
		}
	}

</style>
